<template>
	<div class="freight-container">
		<el-form class="el_form">
			<el-form-item label="订单号：" class="el_form_item">
				<el-input v-model="queryFrom.orderNo" placeholder="请输入订单号" style="width: 100%"></el-input>
			</el-form-item>

			<el-form-item label="状态：" class="el_form_item" style="margin-left: 30px">
				<el-select v-model="queryFrom.status" placeholder="请选择" @change="setLocalThemeConfig">
					<el-option label="全部" :value="null"></el-option>
					<el-option label="待处理" :value="0"></el-option>
					<el-option label="待确认" :value="3"></el-option>
				</el-select>
			</el-form-item>
			<el-button type="primary" @click="getData">查询</el-button>
		</el-form>
		<table-components :tableLoading="tableLoading" :tableData="tableData">
			<el-table-column prop="orderNo" label="订单号" align="center" width="250" />
			<el-table-column prop="type" label="退/换货类型" align="center" width="120">
				<template v-slot="scope">
					<el-tag type="primary" v-if="scope.row.type == 0">退货</el-tag>
					<el-tag type="warning" v-if="scope.row.type == 1">换货</el-tag>
					<el-tag type="danger" v-if="scope.row.type == 2">仅退款</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="reason" label="理由" align="center" />
			<el-table-column prop="userAddress" label="用户收货地址" align="center" />
			<el-table-column label="快递信息" align="center">
				<template v-slot="scope">
					<div style="display: flex; flex-direction: column" v-if="scope.row.expressNo">
						<text>快递公司：{{ scope.row.expressName }}</text>
						<text>快递单号：{{ scope.row.expressNo }}</text>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="用户快递信息" align="center" width="200">
				<template v-slot="scope">
					<div style="display: flex; flex-direction: column" v-if="scope.row.userExpressNo">
						<text>快递公司：{{ scope.row.userExpressName }}</text>
						<text>快递单号：{{ scope.row.userExpressNo }}</text>
					</div>
				</template>
			</el-table-column>

			<el-table-column prop="type" label="当前状态" align="center" width="150">
				<template v-slot="scope">
					<el-tag type="primary" v-if="scope.row.status == 0">待处理</el-tag>
					<el-tag type="success" v-if="scope.row.status == 1">退款中，点击查询</el-tag>
					<el-tag type="danger" v-if="scope.row.status == 2">已拒绝</el-tag>
					<div>
						<el-tag type="warning" v-if="scope.row.status == 3 && scope.row.type == 0">待确认</el-tag>
						<el-tag type="warning" v-if="scope.row.status == 3 && scope.row.type == 1">待重新发货</el-tag>
					</div>
					<el-tag type="success" v-if="scope.row.status == 4">待用户确认收货</el-tag>
					<el-tag type="danger" v-if="scope.row.status == 98">退款失败</el-tag>
					<el-tag type="info" v-if="scope.row.status == 99">已完成</el-tag>
				</template>
			</el-table-column>

			<el-table-column label="操作" align="center" width="100" fixed="right">
				<template v-slot="scope">
					<el-button type="text" size="small" @click="openHandle(scope.row)" v-if="scope.row.status == 0">处理</el-button>
					<el-button type="text" size="small" @click="confirm(scope.row)" v-else-if="scope.row.status == 3 && scope.row.type == 0"
						>确认收货</el-button
					>
					<el-button type="text" size="small" @click="openHandle(scope.row)" v-else-if="scope.row.status == 3 && scope.row.type == 1">发货</el-button>
				</template>
			</el-table-column>
		</table-components>

		<handle :dialogVisible="dialogVisible" :row="clickItem" @handleClose="handleClose"></handle>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import TableComponents from '/@/components/tableComponents/index.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getAfterSalesList, doAftersalesConfirm } from '/@/api/api';
import handle from './dialog/handle.vue';

const tableData = reactive({
	total: 0,
	page: 1,
	size: 20,
	data: [],
});

const queryFrom = ref({});

const tableLoading = ref(false);
async function getData() {
	tableLoading.value = true;
	let par = {
		page: tableData.page,
		size: tableData.size,
		...queryFrom.value,
	};

	let { code, data } = await getAfterSalesList(par);
	if (code == 200) {
		tableData.data = data.list;
		tableData.total = data.total;
		tableLoading.value = false;
	}
}

const clickItem = ref({});
const dialogVisible = ref(false);

// 打开处理售后弹窗
function openHandle(item) {
	clickItem.value = item;
	dialogVisible.value = true;
}

function handleClose() {
	clickItem.value = {};
	dialogVisible.value = false;
	getData();
}

function confirm(item) {
	ElMessageBox.confirm('一旦确认收货货款将原路返回到用户账户，是否继续?', '提示', {
		confirmButtonText: '继续',
		cancelButtonText: '取消',
		type: 'warning',
	})
		.then(() => {
			let par = {
				id: item.id,
				orderId: item.orderId,
				status: 1, // 相当于审批同意
			};

			doAftersalesConfirm(par).then((res) => {
				if (res.code == 200) {
					ElMessage.success('操作成功');
					getData();
				}
			});
		})
		.catch(() => {});
}

onMounted(() => {
	getData();
});
</script>

<style lang="scss" scoped>
@import url('/@/theme/page/page.scss');
.freight-container {
	padding: 20px;
}
</style>
